import {Area, Line} from "@antv/g2plot";
import {OverviewL1} from "@/pages/overview/data";

const data = (type = 0) => [
  {
    date: "3:00",
    type: "校内人群",
    value: [109, 197, 1487][type],
  },
  {
    date: "3:00",
    type: "校外人群",
    value: [57, 204, 1925][type],
  },
  {
    date: "6:00",
    type: "校内人群",
    value: [97, 1076, 1887][type],
  },
  {
    date: "6:00",
    type: "校外人群",
    value: [102, 287, 1353][type],
  },
  {
    date: "9:00",
    type: "校内人群",
    value: [42, 672, 1875][type],
  },
  {
    date: "9:00",
    type: "校外人群",
    value: [74, 764, 2382][type],
  },
  {
    date: "12:00",
    type: "校内人群",
    value: [60, 870, 900][type],
  },
  {
    date: "12:00",
    type: "校外人群",
    value: [34, 243, 2310][type],
  },
  {
    date: "15:00",
    type: "校内人群",
    value: [92, 213, 703][type],
  },
  {
    date: "15:00",
    type: "校外人群",
    value: [33, 241, 494][type],
  },
  {
    date: "18:00",
    type: "校内人群",
    value: [55, 663, 2128][type],
  },
  {
    date: "18:00",
    type: "校外人群",
    value: [39, 612, 629][type],
  },
  {
    date: "21:00",
    type: "校内人群",
    value: [57, 1206, 1735][type],
  },
  {
    date: "21:00",
    type: "校外人群",
    value: [30, 1281, 1465][type],
  },
  {
    date: "24:00",
    type: "校内人群",
    value: [21, 291, 338][type],
  },
  {
    date: "24:00",
    type: "校外人群",
    value: [65, 324, 2052][type],
  },
];

let chartInstance = null;
export const createChartR1 = async (el,data) => {
  if (chartInstance) {
    chartInstance?.destroy();
  }
  chartInstance = new Area(el, {
    padding: [10, 10, 30, 30],
    forceFit: true,
    smooth: true,
    color: ["#B0F5F5", "#72ABF1"],
    data,
    xField: "time",
    yField: "value",
    tooltip: { showMarkers: false },
    autoFit: true,
    legend: {
      title:{
        style:{
          fill:'#fff'
        },
      },
      position:'top-right',
      visible: false,
    },
    xAxis: {
      tickLine: null,
      line: {
        style: {
          stroke: "#B7FFFF",
        },
      },
      label: {
        style: {
          fill: "#B7FFFF",
        },
      },
    },
    yAxis: {
      grid: {
        line: {
          style: {
            stroke: "#ffffff20",
            lineDash: [5, 10],
          },
        },
      },
      label: {
        style: {
          fill: "#B7FFFF",
        },
      },
    },
    responsive: true,
    seriesField: "country",
  });
  chartInstance.render();
};
